<template>
    <div class='commonListDouble' v-loading="loading">
          <div class='list'>
            <el-row class='listComplex_row' v-if="showTable">
                <el-col :span="12"  class='listComplex_col' style='padding-right:5px;'>
                    <commonList2 noclick="N" :model="model" ref="commonList" @openWin="openWin" :model_key="lists[0].modelKey" hidenSearch='Y' @rowClick="rowClick"  @empty="empty" @rowDbClick="rowDbClick" :searchJson="searchStr2" sKey=""  :company="company"  searchs="" listnames=''   @rowMultiClick="rowMultiClick" :appid="appid"></commonList2>
                </el-col>
                 <el-col :span="12"  class='listComplex_col' style='padding-left:5px'>
                    <commonList2 noclick="N" :model="model"  ref="commonList2"  @openWin="openWin"  :model_key="lists[1].modelKey" hidenSearch='Y'  @rowDbClick="rowDbClick"  :searchJson="searchStr3" sKey=""  :company="company"  searchs="" listnames='' :appid="appid" v-if="shows"></commonList2>
                </el-col>
            </el-row>
        </div>
         
        
    </div>
</template>
<script>
import commonList2  from './commonList2.vue'
export default {
    name:'commonListDouble2',
    props:['sKey','sOtherKey','sKey2','exkey','company','model_key','appid','model','searchJson'],
    components: {
        commonList2
    },
    data(){
        return{
            lists:[],
            searchs:'',
            buttonJson:[],
            searchStr:[],
            searchStr2:[],
            searchStr3:[],
            exKey2:this.exKey,
            loading:true,
            showTable:false,
            curRow:null,
            curRows:null,
            shows:false
        }
    },
    created(){       
        this.$post(this.appid,"api/view/commonListComplexJson",{
            sKey:this.sKey,
            sOtherKey:this.sOtherKey,
            sKey2:this.sKey2,
            
            key:escape(this.model_key),
            model:escape(this.model)
        }).then(data=>{
            this.lists=data.list;
            this.buttonJson=data.buttonJson;
            this.col=Number(data.col);
            this.searchStr=data.searchJson;
            this.searchStr2=JSON.parse(JSON.stringify(data.searchJson));
            this.searchStr3=JSON.parse(JSON.stringify(data.searchJson));
           
            this.loading=false;
           
            this.showTable=true;
        })

        window.addEventListener('message', function(messageEvent) {
            
            //sef.goSearch();
            // vue.menuTitle = data;
            // sef.$refs.commonList.isShowTable();
        },false);
    }, 
    mounted(){
        let el=document.getElementsByClassName("listComplex_row");
            let height=document.getElementsByClassName("list")[0].offsetHeight;
            for(let i=0;i<el.length;i++){
                el[i].style.flexDirection= "row";
            }
    },
    methods:{
        openWin(item){
            this.$parent.openWin(item);
        },
        rowDbClick(data){
            this.curRow=JSON.parse(data);
            this.curRow.rowIndex=this.index;
            this.$emit("rowDbClick",JSON.stringify(this.curRow));
        },
         searchEvent(data){
           this.searchStr2=JSON.parse(data);
            
        },
        empty(data){
            this.loading=false;
            let index=-1;
            for(let i=0;i<this.searchStr3.length;i++){
                let searchId=this.searchStr3[i].searchId;
                if(searchId==this.exkey){
                    index=i;
                }
            }
            this.searchStr3[index].val="-1";
            //this.$refs.commonList2.searchEvent(JSON.stringify(data));
            if(this.shows)
                this.$refs.commonList2.goSearch();
            this.shows=true;
        },
        rowClick(data){
            this.loading=false;
            data=JSON.parse(data);
            console.log(data,"data==========================")
            console.log(this.exkey)
            console.log(this.searchStr3,"searchStr3=============="+this.shows)
            let key=data[this.exkey];
            let index=-1;
            for(let i=0;i<this.searchStr3.length;i++){
                let searchId=this.searchStr3[i].searchId;
                if(searchId==this.exkey){
                    index=i;
                }
            }
            this.curRow=data;
            
            this.$set(this.searchStr3[index],"val",key)
           // this.searchStr3[index].val=key;
         //   this.searchStr3[index].val=key;
            //this.$refs.commonList2.searchEvent(JSON.stringify(data));
            if(this.shows)
                this.$refs.commonList2.goSearch();
           
            this.$emit("rowClick",JSON.stringify(data))
            this.shows=true;


           
           
          
        },
       
        rowMultiClick(data){
            this.curRows=JSON.parse(data);
            this.$emit("rowMultiClick",data);
        },
        goSearch(){
            this.$refs.commonList.goSearch();
            this.$refs.commonList2.goSearch();
        },
        getScrollTop(){
            
            return this.$refs.commonList.getScrollTop();
        },
        setScrollTop(top){
            this.$refs.commonList.setScrollTop(top);
        },
        initData(){
            this.$refs.commonList.initData();
            this.$refs.commonList2.initData();
            
        
        },
        loadData(searchJson){
            console.log(searchJson,"searchJson===")
            console.log(this.searchStr2)
            this.searchStr2.forEach((item,index) => {
                searchJson.forEach(item2=>{
                    if(item.searchId==item2.searchId){
                        //item.val=item2.val;
                        this.$set(this.searchStr2[index],"val",item2.val)
                    }
                })
            });
            
            this.$refs.commonList.goSearch();
            //this.$refs.commonList.loadData();
        }
    } ,
    watch:{

    }
}
</script> 
<style scoped>
    .commonListDouble{
        height:100%;
        width:100%;
        display: flex;
        flex-direction: column;

        overflow:hidden;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding:0 10px 0 10px;
    } 
    .list{
        flex:1;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding-top:10px;
        display:flex;
        flex-direction: column;
        overflow:hidden;
    }
    .listComplex_row{
        overflow:hidden;
        display:flex;
        flex:1;
        flex-direction: row;
    }
    .el-col{
        padding:5px 0 5px 0;
        flex:1;
    }
  
   
</style>